<template>
    <a-layout-sider width="200" style="background: #fff">
        <a-menu
                mode="inline"
                v-model:selectedKeys="selectedKeys"
                v-model:openKeys="openKeys"
                :style="{ height: '100%', borderRight: 0 }"
        >
            <a-sub-menu v-for="(i) in menuList" :key="i.path">
                <template #title>
              <span>
                <user-outlined />
                {{i.menuName}}
              </span>
                </template>
                <a-menu-item v-for="item in i.children" :key=item.path>{{item.menuName}}</a-menu-item>
            </a-sub-menu>
        </a-menu>
    </a-layout-sider>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';
	export default defineComponent({
		setup() {
			return {
				menuList: ref([
                    {
                    	menuName: 'menu1',
                        path: '0',
                        children : [
                            {
								menuName: 'submenu1',
                                path: '1'
                            },
							{
								menuName: 'submenu2',
								path: '2'
							},
							{
								menuName: 'submenu3',
								path: '3'
							},
                        ]
                    },
					{
						menuName: 'menu2',
						path: '4',
						children : [
							{
								menuName: 'submenu1',
								path: '5'
							},
							{
								menuName: 'submenu2',
								path: '6'
							},
							{
								menuName: 'submenu3',
								path: '7'
							},
						]
					}
                ]),
				selectedKeys: ref(['1']),
				openKeys: ref(['0']),
			};
		},
	});
</script>

<style scoped>

</style>
